import React from 'react'
import './search.css'

class Search extends React.Component {
    constructor() {
        super()
        this.state = {
            history: [
                "1111", "2222", "3333", "4444", "5555", "6666", "7777"
            ],
            isShow: false,
            hoverIndex: -1,
        }
    }

    render() {
        return (
            <div className="search_box">
                <input className="search_inp" type="type" ref="inpval"
                onFocus={()=> {
                    console.log(this.refs.inpval.value)
                    this.setState({
                        isShow: true
                    })
                }}
                onBlur={()=> {
                    this.setState({
                        isShow: false
                    })
                }}
                onKeyDown={(event)=> {
                    var keyCode = event.keyCode
                    // console.log(keyCode)
                    if(keyCode === 38) {
                        this.state.hoverIndex --;
                        if(this.state.hoverIndex < 0) {
                            this.state.hoverIndex = this.state.history.length-1
                        }
                        this.setState({
                            hoverIndex: this.state.hoverIndex
                        })
                        this.refs.inpval.value = this.state.history[this.state.hoverIndex]
                    }else if(keyCode === 40) {
                        this.state.hoverIndex ++;
                        if(this.state.hoverIndex > this.state.history.length-1) {
                            this.state.hoverIndex = 0
                        }
                        this.setState({
                            hoverIndex: this.state.hoverIndex
                        })
                        this.refs.inpval.value = this.state.history[this.state.hoverIndex]
                    }
                }} 
                />
                <button className="search_btn"
                onClick={()=>{
                    var value = this.refs.inpval.value
                    var rel = true;
                    if(value.length === 0) {
                        rel = false;
                    }
                    if(rel) {
                        this.state.history.unshift(value)
                    }
                }}>百度一下</button>
                <div className={this.state.isShow?'search_content':'search_content_hidden'}>
                    {
                        this.state.history.map((item, index)=> {
                            return <p key={index}
                            className={this.state.hoverIndex === index?'search_content_enter':''}
                            onMouseEnter={()=> {
                                this.setState({
                                    hoverIndex: index
                                })
                            }}>{item}</p>
                        })
                    }
                </div>
            </div>
        )
    }
}

export default Search